<template>
  <div class="box">
    <h1 class="flex-center">居中+ 左对齐布局</h1>
    <box-left-center
      v-loading="menuObj.loading"
      :list="menuObj.data"
      :display-text-fun="menuObj.displayFun"
      :item-style="menuObj.style"
      @item-click="menuClick"
    />
  </div>
</template>

<script>
import BoxLeftCenter from "@/components/BoxLeftCenter";
export default {
  components: { BoxLeftCenter },
  props: {

  },
  data() {
    return {
      menuObj: {
        loading: false,
        data: [
          {
            label: "1",
            value: 1
          },
          {
            label: "2",
            value: 2
          },
          {
            label: "3",
            value: 3
          },
          {
            label: "4",
            value: 4
          },
          {
            label: "5",
            value: 5
          },
          {
            label: "6",
            value: 6
          },
          {
            label: "7",
            value: 7
          },
          {
            label: "8",
            value: 8
          },
          {
            label: "9",
            value: 9
          }
        ],
        // 显示的文本
        displayFun: (item) => {
          return item.label;
        },
        style: {
          width: "60px",
          height: "60px",
          color: "#fff",
          background: "#00A2FF"
        }
      }
    };
  },
  created() {
    this.menuObj.loading = true;
    setTimeout(() => {
      this.menuObj.loading = false;
    }, 2000);
  },
  methods: {
    menuClick(item, index) {
      console.log(item, index, "----------");
    }
  }
};
</script>

<style scoped lang="scss">
.box{
  height: 100%;
  width: 500px;
  border: 1px solid blue;
  margin: auto;
  margin-top: 40px;
}
</style>
